import { useState } from "react";
import { Slider, Button, DatePicker } from "antd";
import {
  CaretRightFilled,
  PauseOutlined,
  ArrowLeftOutlined,
} from "@ant-design/icons";
import "dayjs/locale/zh-cn";
import locale from "antd/es/date-picker/locale/zh_CN";
import "./index.scss";

/**
 * @param {*} LUSHU_INSTANCE LuShu实例 用于开启运行轨迹
 * @param {*} closePlayer  关闭播放器方法
 */
export default function Player({ LUSHU_INSTANCE, closePlayer }) {
  const [isPlay, setIsPlay] = useState(true);
  /**
   * 播放
   */
  const handelPlay = () => {
    setIsPlay(false);
    LUSHU_INSTANCE.current.start();
  };

  /**
   * 暂停
   */
  const handelPause = () => {
    setIsPlay(true);
    LUSHU_INSTANCE.current.pause();
  };

  /**
   * 总进度改变事件
   */
  const handleSliderChange = (e) => {
    console.log("进度", e);
  };

  /**
   * 事件日期改变
   */
  const handleDataChange = (e) => {
    console.log(e);
  };

  /**
   * 返回
   */
  const handleBack = () => {
    closePlayer();
  };

  return (
    <div className="player">
      <div className="top">
        <div className="title">轨迹</div>
        <DatePicker
          onChange={handleDataChange}
          locale={locale}
          bordered={false}
          allowClear={false}
        />
        <div className="backbtn" onClick={handleBack}>
          <ArrowLeftOutlined />
          <div style={{ marginLeft: 6 }}>返回</div>
        </div>
      </div>
      <div className="under">
        <div className="start">
          {isPlay ? (
            <CaretRightFilled style={{ fontSize: 38 }} onClick={handelPlay} />
          ) : (
            <PauseOutlined style={{ fontSize: 38 }} onClick={handelPause} />
          )}
        </div>
        <div className="slider">
          <Slider onChange={handleSliderChange} />
        </div>
        <div className="speed">
          <Button type="primary">倍速</Button>
        </div>
      </div>
    </div>
  );
}
